<template>
    <div style="position: relative;height: 100%;width: 100%;display: flex;padding: 10px 0 0 10px">
        <Userbar ref="userbar" :conversation.sync="conversation"></Userbar>
        <div v-if="conversation !=null"
             style="width: calc(100% - 260px);border-top-left-radius: 8px;color: #ffffff;position: relative;">

            <div style="color: #656565;padding: 14px 14px 60px 14px;position: relative;z-index: 1000;background-color: white;width: 300px;border-radius: 8px;border: 1px solid #e6e6e6;">
                <div style="font-size: 24px;font-weight: bold"><template v-if="conversation.transfer == 0">接待</template><template v-else>转接会话</template></div>
                <div style="margin-top: 14px;font-size: 14px;">会话Id:{{conversation.id}}</div>
                <div style="margin-top: 8px;font-size: 14px;">用户:{{conversation.userEntity.nickName}}</div>
                <div style="margin-top: 8px;font-size: 14px;" v-if="conversation.transfer != 0">来源:{{conversation.sourceUserEntity.userName}}</div>
                <div style="margin-top: 8px;font-size: 14px;" v-if="conversation.transfer != 0">转接说明:{{conversation.remark}}</div>
                <div style="margin-top: 12px;position: absolute;bottom: 20px;;width: calc(100% - 28px)">
                    <button class="btn btn-success btn-block" @click="startConversation()">接待
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
    import Userbar from './Userbar'
    export default {
        name: 'Waiting',
        data () {
            return {
                conversation: null
            }
        },
        components: {Userbar},
        methods: {
            startConversation: function () {
                const that = this;
                $.post('/conversation/start', {conversationId: this.conversation.id}, function (data) {
                    that.$router.push('/chat/current');
                })
            },
        },
        mounted(){
            this.$refs.userbar.findConversation(0);
        }
    }
</script>
